<template>
    <div class="flex-jsb">
        <div>
            <span :class="{ 'line': true, 'wide-line': bold }"></span>
            <span class="title-text" :style="{ fontSize: size + 'px' }">{{ text }}</span>
        </div>
        <div>
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        bold: {
            type: Boolean,
            default: false
        },
        size: {
            type: Number,
            default: 16
        },
        text: {
            type: String,
            default: "",
        }
    },
    data() {
        return {

        }
    },
    mounted() {

    },
    computed: {

    },
    methods: {

    },
}
</script>
<style scoped lang="scss">
.flex-jsb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.line {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #21b795;
    vertical-align: -2px;

    &.wide-line {
        width: 4px;
    }
}

.title-text {
    color: #000;
    padding-left: 10px;
}
</style>
